<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<style>
			h2,h3{font-weight: normal;}
			.mui-card-content{padding: 5px 5px 20px;position: relative;}	
			.cell-icon{padding: 10px;}
			.icon{font-size: 2em;}
			.icon-bg{position: absolute;right: 10px;top:-22px;font-size: 160px;opacity: .05;}
			.bankname{font-size: 1.2em;}
			.cardno{font-size: 2em;}
		</style>
	</head>
	
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<a id="submit" class="mui-btn mui-btn-blue mui-btn-link mui-pull-right">添加</a>
			<h1 class="mui-title">银行卡</h1>
		</header>
		<div class="mui-content">
			<div id="pullrefresh"></div>
		</div>

		<script src="js/mui.min.js"></script>
		<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/parseTemplate.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/iconfont.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/resources.js" type="text/javascript" charset="utf-8"></script>
		<script id="tplList" type="text/html">
			<# 
				if(data && data.length > 0){
				var item;for(var i=0 ; i < data.length; i++) { item=data[i]; #>
						<div class="mui-card">
							<div class="mui-card-content">
									<div class="mui-table-cell cell-icon">
										<svg class="icon text-middle" aria-hidden="true">
											<use xlink:href="#icon-<#= item.BankCode #>"></use>
										</svg>
									</div>
									<div class="mui-table-cell">
										<div class="bankname"><#=item.BankName#></div>
										<div class="mui-h6"><#=resources.GetBankCardTypeByValue(item.Type)#></div>
										<h3 class="cardno">**** **** **** <#=item.CardNo.substr(item.CardNo.length-4)#></h3>
									</div>
									<svg class="icon text-middle icon-bg" aria-hidden="true">
											<use xlink:href="#icon-<#= item.BankCode #>"></use>
										</svg>
							</div>
						</div>
			<#}}else{#>
				<li class="mui-table-view-cell list-nodata"><div>没有找到任何记录！</div></li>
				<#}#>
		</script>
		<script type="text/javascript">
			mui.init();
			
			document.getElementById("submit").addEventListener('tap',function(){
				mui.openWindow("bankcard-add.html?t=3", "bankcard-add.html");
			});
			
			window.addEventListener('refresh', function(e){
				console.log("refresh");
				init();
			});
						
			var account = app.account();
			var $list = document.getElementById("pullrefresh");
			var tpl = document.getElementById("tplList").innerHTML;

			init = function() {
				mui.showLoading();
				app.getBankCardData(function (data) {
					console.log(JSON.stringify(data));
						$list.innerHTML = parseTemplate(tpl, {
							data: data
						});					
				});
			};
			
			mui.plusReady(function() {
				init();
			});
		</script>
	</body>

</html>